<template>
    <div class="top-bar-container">
        <router-link
            exact-active-class="router-link-exact-active"
            v-for="item in categoryList"
            :to="item.path"
            :key="item.id"
        >
            <span v-if="item.name">{{ item.name }}</span>
            <span v-else :class="'iconfont' + ' ' + 'icon-sousuo'"></span>
            <i v-if="item.icon !== ''" :class="item.icon"></i>
        </router-link>
    </div>
</template>

<script setup>
import { defineProps } from "@vue/runtime-core";

defineProps({
    categoryList: {
        type: Array,
        default: function () {
            return [];
        },
    },
});
</script>

<style lang="less" scoped>
.top-bar-container {
    background-color: #fff;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    text-align: center;
    a {
        white-space: nowrap;
        list-style: none;
        text-decoration: none;
        flex: 1;
        font-size: 15px;
        .iconfont {
            font-size: 8px;
        }
    }
    a:last-child {
        span {
            font-size: 20px;
            color: @primary-color;
        }
    }
}

.router-link-exact-active {
    color: #333;
    font-size: 17px !important;
    font-weight: bold;
}
</style>
